<template>
	<view class="me-box">
		<u-navbar
			:is-back="false"
			title="我的"
			:title-bold="true"
			:border-bottom="false"
			title-color="#000">
		</u-navbar>
		
		<view class="me-center">
			<view class="flex justify-between align-center mb30" @click="l.to('/pages/me/setUser/setUser')">
				<view class="flex align-center">
					<image :src="userInfo.headImg" class="w120 h120 r60" mode=""></image>
					
					<view class="ml32">
						<view class="f30" style="color: #000000; font-weight: 600;">
							{{userInfo.nickName}}
							<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
							<image v-if="userInfo.menberLabel == -1" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
							<image v-if="userInfo.menberLabel == 0" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
							<image v-if="userInfo.menberLabel == 1" src="../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
							<image v-if="userInfo.menberLabel == 2" src="../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
							<image v-if="userInfo.menberLabel == 3" src="../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
							<image v-if="userInfo.menberLabel == 4" src="../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
						</view>
						<view class="f24 mt24" style="color: #666666;">
							ID:{{userInfo.id}}
						</view>
					</view>
				</view>
				<view class="">
					<i class="cuIcon-right f36" style="color: #999999;"></i>
				</view>
			</view>
			
			
			<view class="user-init flex align-center">
				<view class="pl90" @click="l.to('/pages/me/homeCollect?bor=' + 1)">
					<view class="f38 text-center" style="color: #000000; font-weight: 600;">
						{{userTab.meFollow}}
					</view>
					<view class="f26 " style="color: #666666;">
						关注
					</view>
				</view>
				<view class="ml146" @click="l.to('/pages/me/homeCollect?bor=' + 2)">
					<view class="f38 text-center" style="color: #000000; font-weight: 600;">
						{{userTab.meFens}}
					</view>
					<view class="f26 " style="color: #666666;">
						粉丝
					</view>
				</view>
				<view class="ml155">
					<button type="default" class="cu-btn btn-aut">
						<i class="cuIcon-check"></i> 
						<text v-if="userTab.isAuth == 1">已认证</text>
						<text v-if="userTab.isAuth == 'unll'">未认证</text>
					</button>
				</view>
			</view>
			
			
			<view class="member-box flex justify-between align-center pl44 pr44 mb30"
				@click="l.to('/pages/me/members/members')">
				<view class="">
					<view class="vip">
						VIP会员中心
					</view>
					<view class="f24" style="color: #FFFFFF; opacity: 0.6;">
						开通VIP会员尊享多项专属权益
					</view>
				</view>
				<view class="">
					<button type="default" class="cu-btn add-btn"><text>立即开通</text></button>
				</view>
			</view>
			
			
			<view class=" class-box">
				<view class="pt40 pl32 f32" style="color: #000000; font-weight: 600;">
					服务与工具
				</view>
				<view class="grid justify-between mt49 pl36 pr36">
					<view
						class="text-center grid-right w102 mb50"
						v-for="(item, index) in tabList" :key="index"
						@click="l.to(item.path)">
						<image :src="item.icon" class="w48 h48" mode=""></image>
						<view class="f26 mt24 " style="white-space: nowrap;" >
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		
		
		
		
		

		<u-tabbar active-color="#000000" inactive-color="#999999" icon-size="48" height="110" @change="changePages" v-model="current" :list="list"></u-tabbar>
		<yy-tip :isCustom="false" />

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						iconPath: '../../static/tab/home.png',
						selectedIconPath: '../../static/tab/home-sele.png',
						text: '广场',
						customIcon: false,
						pagePath: '/pages/tab/index'
					},
					// {
					// 	iconPath: '../../static/tab/1v1.png',
					// 	selectedIconPath: '../../static/tab/1v1-sele.png',
					// 	text: '1v1',
					// 	customIcon: false,
					// 	pagePath: '/pages/tab/covey'
					// },
					// {
					// 	iconPath: '../../static/tab/good.png',
					// 	selectedIconPath: '../../static/tab/good.png',
					// 	text: '推荐',
					// 	midButton: true,
					// 	customIcon: false,
					// 	pagePath: '/pages/tab/recommend'
					// },
					{
						iconPath: '../../static/tab/tuij.png',
						selectedIconPath: '../../static/tab/tuij-sele.png',
						text: '推荐',
						customIcon: false,
						pagePath: '/pages/tab/recommend'
					},
					{
						iconPath: '../../static/tab/chat.png',
						selectedIconPath: '../../static/tab/chat-sele.png',
						text: '聊天',
						customIcon: false,
						pagePath: '/pages/tab/chat'
					},
					{
						iconPath: '../../static/tab/me.png',
						selectedIconPath: '../../static/tab/me-sele.png',
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tab/me'
					}
				],
				current: 0,
				tabList: [
				// 	{
				// 	icon: "../../static/img/home.png",
				// 	path: '/pages/me/homeCollect',
				// 	name: '房间收藏'
				// },
				{
					icon: "../../static/img/phon.png",
					path: '/pages/me/mePhone',
					name: '个人相册'
				},{
					icon: "../../static/img/play.png",
					path: '/pages/me/issuePlay',
					name: '发布陪玩'
				},{
					icon: "../../static/img/friend.png",
					path: "/pages/me/inivte",
					name: '邀请好友'
				},{
					icon: "../../static/img/kf.png",
					path: '/pages/me/service',
					name: '客服'
				},{
					icon: "../../static/img/panit.png",
					path: '/pages/me/meOrder',
					name: '订单'
				},{
					icon: "../../static/img/mone.png",
					path: '/pages/me/wallet',
					name: '钱包'
				},{
					icon: "../../static/img/set.png",
					path: '/pages/me/set/set',
					name: '设置'
				},{
					icon: "../../static/img/issue.png",
					path: '/pages/me/frequently',
					name: '常见问题'
				}],
				userInfo: {},
				userTab: {},
			};
		},
		onLoad(e) {},
		onShow() {
			this.getUser()
			this.getUserInfo()
		},
		methods: {
			changePages(e,index) {
				console.log('e==>', e,index);
				// if(e == 0) {
				// 	this.l.to('/pages/tab/index')
				// } else if ( e == 1) {
				// 	this.l.to('/pages/tab/covey')
				// } else if ( e == 2) {
				// 	this.l.to('/pages/tab/recommend')
				// } else if ( e == 3) {
				// 	this.l.to('/pages/tab/chat')
				// } else  {
				// 	this.l.to('/pages/tab/me')
				// }
				
				if (e == 0) {
					this.l.to('/pages/tab/index');
				} else if (e == 1) {
					this.l.to('/pages/tab/recommend');
				} else if (e == 2) {
					this.l.to('/pages/tab/chat');
				} else if (e == 3) {
					this.l.to('/pages/tab/me');
				} 
			},
			
			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
				console.log('this.userInfo==>', this.userInfo);
			},
			
			async getUser() {
				const res = await this.$u.get('api/user/meAll')
				this.userTab = res.data
				uni.setStorageSync('isAuto', res.data)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.me-box {
		
		.me-center {
			padding: 30rpx;
			
			.user-init {
				height: 136rpx;
				background: #FFFFFF;
				box-shadow: 0px 1rpx 11rpx 0px rgba(0, 0, 0, 0.04);
				border-radius: 20rpx;
			}
			
			.btn-aut {
				font-size: 24rpx;
				color: #FFFDD9;
				border-radius: 30rpx;
				padding: 17rpx 23rpx;
				background: linear-gradient(-35deg, #404242, #6B6B69);
			}
			
			.member-box {
				margin-top: 23rpx;
				height: 150rpx;
				background: linear-gradient(270deg, #333968, #1D2444);
				border-radius: 20rpx;
				
				.vip {
					font-family: Swei Marker Sans CJK SC;
					font-weight: bold;
					font-style: italic;
					color: #F1E4B7;
					font-size: 32rpx;
					margin-bottom: 22rpx;
				}
				
				.add-btn {
					color: #7E5E26;
					font-size: 24rpx;
					padding: 14rpx 20rpx;
					background: linear-gradient(-35deg, #DDCC91, #F1E4B7);
					border-radius: 36rpx;
				}
			}
			
			.class-box {
				// height: 570rpx;
				box-shadow: 0px 1px 11px 0px rgba(0, 0, 0, 0.04);
				border-radius: 20rpx;
				
				.grid-right {
					margin-right: 70rpx;
				}
				
				.grid-right:nth-child(4n + 0) {
					margin-right: 0;
				}
			}
		}
	}
</style>
